
<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-8">
        <div v-loading="loading" class="float-left bg-light border">
          <el-button
            title="添加"
            @click="submit(true)"
            type="success"
            icon="el-icon-circle-plus-outline"
            circle
          ></el-button>
          <el-button title="删除" @click="submit(false)" type="danger" icon="el-icon-delete" circle></el-button>
        </div>
        <div class="float-left bg-info border">
          <el-button
            v-for="(v,i) in children"
            @click="children.splice(i+1,children.length-i)"
            v-text="v.name.slice(0,1)"
            circle
            :key="`children${i}`"
          ></el-button>
        </div>
        <div class="float-right">
          <el-checkbox v-model="checked">没组</el-checkbox>
        </div>
      </div>

      <div class="col-4">
        <el-input v-model="search" placeholder="请输入内容"></el-input>
      </div>
    </a-layout-header>

    <a-layout-content>
      <div
        v-for="(v, i) in noselectData"
        :key="`noselectData${i}`"
        class="float-left box-card rounded admin-noselect-color"
        @click="clickdata(v)"
        v-show="checked"
        :title="v.name"
      >
        <div class="font-weight-bold"  v-text="v.name"></div>
      </div>
      <div
        v-for="(v, i) in tableDate"
        :key="i"
        class="float-left box-card rounded position-relative"
        :class="v.noselectColor"
        v-show="!checked"
      >
        <div @click="findchildren(v)" :title="v.name" class="position-absolute"></div>

        <div class="font-weight-bold">
          <el-checkbox
            :indeterminate="indeterminate(v)"
            :label="v.ID"
            v-model="checkList"
            @change="changecheckList(v.ID)"
          >{{v.name.slice(0, 15)}}</el-checkbox>
        </div>
        <div class="font-size-14">
          {{v.mynum.length}}/{{v.num.length}}
          <span v-if="v.children">下级数量{{v.children.length}}</span>
          <el-progress :percentage="Math.floor(v.num.length?v.mynum.length/v.num.length*100:0)"></el-progress>
        </div>
      </div>
    </a-layout-content>
    <changemodelgroup
      ref="changemodelgroup"
      v-bind="{ allData, selectDate, clickdata, pagesize, currentPage, groupdata, ID:tmpgroup.ID ,allcheckList, changecheckedlist, handleCurrentChange }"
    ></changemodelgroup>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data: getdata }"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
import adminContentFooter from "./admin-content-footer";
// eslint-disable-next-line no-unused-vars
import {
  uniq,
  last,
  difference,
  without,
  union,
  intersection
} from "underscore";
import changemodelgroup from "./changemodelgroup";
export default {
  name: "changemodel",
  data() {
    return {
      search: "",
      checked: false,
      isIndeterminate: false,
      pagesize: 20,
      currentPage: 1,
      ID: 0,
      children: [],
      checkList: [],
      index: 0,
      allcheckList: [],
      radio1: true,
      loading: false
    };
  },
  props: {
    group: {
      type: Array,
      default: () => {
        return [];
      }
    },
    groupdata: {
      type: Array,
      default: () => {
        return [];
      }
    },
    allData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    selectDate: {
      type: Array,
      default: () => {
        return [];
      }
    },
    clickdata: Function
  },
  watch: {
    checkList(value, oladvalue) {
      let { groupdata, allcheckList } = this;
      const add = difference(value, oladvalue);
      const rem = difference(oladvalue, value);
      const addarr = groupdata
        .filter(v => add.includes(v.groupid))
        .map(v => v.childid);
      const remarr = groupdata
        .filter(v => rem.includes(v.groupid))
        .map(v => v.childid);
      const tmp = without(union(allcheckList, addarr), ...remarr);
      this.allcheckList = tmp;
    }
  },
  computed: {
    tableDate() {
      const {
        currentPage,
        pagesize,
        inputgroup,
        groupdata,
        selectID,
        getchildren
      } = this;
      const data = inputgroup.map(v => {
        const length = getchildren(v, [{ ID: v.ID }]).map(vo => vo.ID);
        const num = groupdata.filter(vo => length.includes(vo.groupid));
        const mynum = num.filter(vo => selectID.includes(vo.childid));

        let noselectColor = "";
        if (num.length === 0 || mynum.length === 0) {
          noselectColor = "admin-noselect-color";
        } else if (mynum.length === num.length) {
          noselectColor = "admin-allselect-color";
        } else {
          noselectColor = "admin-select-color";
        }
        return {
          ...v,
          num,
          mynum,
          noselectColor
        };
      });
      return data.slice((currentPage - 1) * pagesize, currentPage * pagesize);
    },
    inputgroup() {
      const { search, tmpgroup } = this;
      if (tmpgroup) {
        return tmpgroup.children.filter(
          data =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        );
      } else {
        return [];
      }
    },
    selectID() {
      return this.selectDate.map(v => v.ID);
    },
    allDataID() {
      return this.allData.map(v => v.ID);
    },
    groupdataID() {
      return uniq(this.groupdata.map(v => v.childid));
    },
    noselectData() {
      const { allData, groupdataID } = this;
      return allData.filter(v => !groupdataID.includes(v.ID));
    },
    getdata() {
      const { checked, tmpgroup, $refs, inputgroup } = this;
      const { children } = tmpgroup;
      if (checked) {
        return [];
      }
      if (children.length) {
        return inputgroup;
      }
      if ($refs.changemodelgroup) {
        return $refs.changemodelgroup.inputgroup;
      }
      return [];
    },
    tmpgroup() {
      const { children } = this;
      return children.length
        ? last(children)
        : { ID: 0, name: "", children: [] };
    }
  },
  mounted() {
    this.children.push({ ID: 0, name: "顶级", children: this.group });
  },
  methods: {
    groupbyid(ID) {
      return this.groupdata.filter(vo => vo.groupid === ID);
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    primary({ ID }) {
      if (this.selectID.includes(ID)) {
        return "bg-info";
      }
    },
    findchildren({ ID, name, children = [] }) {
      this.children.push({ ID, name, children });
    },
    getcheckList(ID) {
      return this.checkList.includes(ID);
    },
    changecheckedlist(ID) {
      if (this.allcheckList.includes(ID)) {
        this.allcheckList = without(this.allcheckList, ID);
      } else {
        this.allcheckList.push(ID);
      }
    },
    indeterminate({ num }) {
      const { allcheckList } = this;
      const bj = num.map(v => v.childid);
      const jj = intersection(bj, allcheckList);

      if (jj.length == num.length) {
        return false;
      }
      if (jj.length > 0) {
        return true;
      }
      return false;
    },
    getchildren(data, arr = []) {
      const { children = [] } = data;
      for (let v of children) {
        arr.push(v);
        this.getchildren(v, arr);
      }
      return arr;
    },
    changecheckList(ID) {
      let { checkList, getchildren, tmpgroup, children } = this;
      // 获取这次是添加还是取消
      const add = checkList.includes(ID);
      // 获取父级ID
      // eslint-disable-next-line no-unused-vars
      const [a, ...x] = children.map(v => v.ID);
      // 获取当前父级id
      const v = tmpgroup.children.find(v => v.ID == ID);
      // 获取子级ID
      const r = union(getchildren(v).map(v => v.ID), []);
      if (add) {
        this.checkList = union(checkList, r, ...x);
      } else {
        this.checkList = without(checkList, ...r);
      }
    },
    submit(v) {
      this.radio1 = v;
      const { radio1, allcheckList, selectID, clickdata } = this;
      this.loading = true;
      if (radio1) {
        const idarr = without(allcheckList, ...selectID);
        for (let v of idarr) {
          clickdata({ ID: v });
        }
      } else {
        const idarr = intersection(selectID, allcheckList);
        for (let v of idarr) {
          clickdata({ ID: v });
        }
      }
      this.allcheckList = [];
      this.checkList = [];
      this.loading = false;
    }
  },
  components: {
    adminContentFooter,
    changemodelgroup
  }
};
</script>

<style scoped>
.box-card {
  width: 240px;
  margin: 5px;
  cursor: pointer;
  height: 106px;
  padding: 8px;
  transition: all 0.3s ease-in-out;
  border: 1px solid rgba(64, 158, 255, 1);
}
.box-card:hover {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.admin-noselect-color {
  background-color: #ffffff;
  color: rgba(64, 158, 255, 1);
}
.admin-allselect-color {
  background-color: #e9f4ff;
  color: rgba(64, 158, 255, 1);
}
.admin-select-color {
  background-color: #e9f4ff;
  color: rgba(64, 158, 255, 1);
}
.font-size-14 {
  font-size: 14px;
  color: rgba(64, 158, 255, 1);
}
.position-absolute {
  width: 100%;
  height: 100%;
}
</style>
